<template>
  <div class="gift-wrap">
    <div>
      <div class="title-wrap">
        <p class="title">礼包选择</p>
      </div>
      <!-- 商品列表  -->
      <div class="gift-list">
        <div class="gift-item" v-for="item in products" @click="productClick(item)"
          :class="{ active: item.shop_id == selectProduct.shop_id }">
          <div class="tag-icons-wrap" v-if="item.discount < 10">
            <p class="pluto-proportion">
              {{ item.discount }}
              <span class="percent">折</span>
            </p>
          </div>
          <div class="gift-icon" :class="['i' + item.img_name]"></div>
          <div class="product-name">{{ item.shop_name }}</div>
          <div class="description-wrap">
            <div class="desc">
              <p>{{ item.detail }}</p>
            </div>
          </div>
          <div class="ext-wrap"></div>
          <div class="price-btn">
            <span class="mr5">¥</span>
            {{ item.shop_price }}
          </div>
        </div>
      </div>

      <!-- 收银台 mp  -->
      <popupBar v-if="isMobile" :popshow.sync="mpPayShow" :isMobile="isMobile">
        <div class="popup pay">
          <div class="popup-title-wrap">
            确认支付订单
            <i class="el-icon-close close" @click="mpPayShow = false"></i>
          </div>
          <div class="popup-content pay">
            <div class="payment-wrap">
              <!-- 数量选择器 -->
              <div class="pay-amount">
                <p class="titile">购买数量</p>
                <div class="stepper-wrap">
                  <div class="stepper">
                    <button type="button" class="hx-button " @click="minus" :class="{ 'btn-disabled': count <= 1 }">
                      <span>
                        <svg width="12" height="2" xmlns="http://www.w3.org/2000/svg">
                          <rect x="149" y="1210" width="12" height="2" rx="1" transform="translate(-149 -1210)"
                            fill="currentColor" fill-rule="evenodd"></rect>
                        </svg>
                      </span>
                    </button>
                    <div class="step-content">
                      <input type="text" class="input" v-model="count" @input="onlyNumbers" @blur="inputBlur">
                      <div class="max-limit">/ {{ countLimit }}</div>
                    </div>
                    <button type="button" class="hx-button" @click="add" :class="{ 'btn-disabled': count >= countLimit }">
                      <span>
                        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M6 0a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2H7v4a1 1 0 0 1-2 0V7H1a1 1 0 0 1 0-2h4V1a1 1 0 0 1 1-1Z"
                            fill="currentColor" fill-rule="evenodd"></path>
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>

              <!-- 优惠券 -->
              <!-- <div class="coupon-wrap">
                <p class="title">优惠券</p>
                <div class="content">
                  <p>完成登录后可查看</p>
                </div>
              </div> -->

              <!-- 支付详细信息 -->
              <div class="pay-content-wrap">
                <div class="detail">
                  <p class="item">
                    <span class="label">商品信息：</span>
                    <span class="gary">{{ selectProduct.shop_name ? selectProduct.shop_name : '-' }}</span>
                  </p>
                  <p class="item">
                    <span class="label">商品数量：</span>
                    <span class="gary">{{ selectProduct.shop_id ? count : '-' }}</span>
                  </p>
                  <p class="item">
                    <span class="label">角色信息：</span>
                    <span class="gary">{{ userInfo.name ? userInfo.name + '-' + userInfo.sidname : '-' }} </span>
                  </p>
                </div>
                <div class="total">
                  <p class="item">
                    <span class="label">商品原价：</span>
                    <span class="gary" v-if="totalPrice == '-'">-</span>
                    <span v-else>{{ '¥ ' + (Number(totalPrice).toFixed(2)) }}</span>
                  </p>
                  <p class="item">
                    <span class="label">商品折扣：</span>
                    <span class="gary"><span>
                        <span class="gary" v-if="selectProduct.discount < 10">{{ selectProduct.discount }}折</span>
                        <span class="line gary" v-if="selectProduct.discount < 10">丨</span>
                        <span class="gary" v-if="discountedPrice == '-'">-</span>
                        <span class="discount-amount " v-else>{{ '- ¥ ' + discountedPrice.toFixed(2) }}</span>
                      </span></span>
                  </p>
                  <!-- <p class="item">
                    <span class="label">优惠券：</span>
                    <span class="gary">-</span>
                  </p> -->
                </div>
              </div>

              <!-- 合计栏 -->
              <div class="total-info">
                <span>合计</span>
                <span class="amount">
                  <span class="currency">¥</span>
                  {{ total.toFixed(2) }}
                </span>
              </div>

              <!-- 支付方式 -->
              <div class="pay-type-wrap">
                <div class="title">
                  <p>支付方式</p>
                </div>
                <div class="pay-type-list">
                  <div class="pt-btn" :class="{ active: payType == 0, disabled: payType == null }"
                    @click="payTypeClick(0)">
                    <img src="@/assets/images/pay-zfb.png" alt="" class="icon">
                    <span class="recommend">推荐</span>
                  </div>
                  <div class="pt-btn" :class="{ active: payType == 1, disabled: payType == null }"
                    @click="payTypeClick(1)">
                    <img src="@/assets/images/pay-wechat.png" alt="" class="icon">
                  </div>
                </div>
              </div>

              <!-- 立即支付按钮 -->
              <div class="pay-btn-wrap">
                <div class="button" :class="{ active: selectProduct.shop_id }" @click="toBuy" v-loading="payLoading">立即支付
                </div>
              </div>

            </div>
          </div>
        </div>

      </popupBar>

      <!-- 收银台 pc -->
      <div class="payment-wrap" v-else>
        <!-- 数量选择器 -->
        <div class="pay-amount">
          <p class="titile">购买数量</p>
          <div class="stepper-wrap">
            <div class="stepper">
              <button type="button" class="hx-button " @click="minus" :class="{ 'btn-disabled': count <= 1 }">
                <span>
                  <svg width="12" height="2" xmlns="http://www.w3.org/2000/svg">
                    <rect x="149" y="1210" width="12" height="2" rx="1" transform="translate(-149 -1210)"
                      fill="currentColor" fill-rule="evenodd"></rect>
                  </svg>
                </span>
              </button>
              <div class="step-content">
                <input type="text" class="input" v-model="count" @input="onlyNumbers" @blur="inputBlur">
                <div class="max-limit">/ {{ countLimit }}</div>
              </div>
              <button type="button" class="hx-button" @click="add" :class="{ 'btn-disabled': count >= countLimit }">
                <span>
                  <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 0a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2H7v4a1 1 0 0 1-2 0V7H1a1 1 0 0 1 0-2h4V1a1 1 0 0 1 1-1Z"
                      fill="currentColor" fill-rule="evenodd"></path>
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>

        <!-- 优惠券 -->
        <!-- <div class="coupon-wrap">
          <p class="title">优惠券</p>
          <div class="content">
            <p>完成登录后可查看</p>
          </div>
        </div> -->

        <!-- 支付方式 -->
        <div class="pay-type-wrap">
          <div class="title">
            <p>支付方式</p>
          </div>
          <div class="pay-type-list">
            <div class="pt-btn" :class="{ active: payType == 0, disabled: payType == null }" @click="payTypeClick(0)">
              <img src="@/assets/images/pay-zfb.png" alt="" class="icon">
              <span class="recommend">推荐</span>
            </div>
            <div class="pt-btn" :class="{ active: payType == 1, disabled: payType == null }" @click="payTypeClick(1)">
              <img src="@/assets/images/pay-wechat.png" alt="" class="icon">
            </div>
          </div>
        </div>

        <!-- 支付详细信息 -->
        <div class="pay-content-wrap">
          <div class="detail">
            <p class="item">
              <span class="label">商品信息：</span>
              <span class="gary">{{ selectProduct.shop_name ? selectProduct.shop_name : '-' }}</span>
            </p>
            <p class="item">
              <span class="label">商品数量：</span>
              <span class="gary">{{ selectProduct.shop_id ? count : '-' }}</span>
            </p>
            <p class="item">
              <span class="label">角色信息：</span>
              <span class="gary">{{ userInfo.name ? userInfo.name + '-' + userInfo.sid : '-' }} </span>
            </p>
          </div>
          <div class="total">
            <p class="item">
              <span class="label">商品原价：</span>
              <span class="gary" v-if="totalPrice == '-'">-</span>
              <span v-else>{{ '¥ ' + (Number(totalPrice).toFixed(2)) }}</span>
            </p>
            <p class="item">
              <span class="label">商品折扣：</span>
              <span>
                <span class="gary" v-if="selectProduct.discount < 10">{{ selectProduct.discount }}折</span>
                <span class="line gary" v-if="selectProduct.discount < 10">丨</span>
                <span class="gary" v-if="discountedPrice == '-'">-</span>
                <span class="discount-amount " v-else>{{ '- ¥ ' + discountedPrice.toFixed(2) }}</span>
              </span>
            </p>
            <!-- <p class="item">
              <span class="label">优惠券：</span>
              <span class="gary">-</span>
            </p> -->
          </div>
        </div>

        <!-- 合计栏 -->
        <div class="total-info">
          <span>合计</span>
          <span class="amount">
            <span class="currency">¥</span>
            {{ total.toFixed(2) }}
          </span>
        </div>

        <div class="pay-btn-wrap">
          <div class="button" :class="{ active: selectProduct.shop_id }" @click="toBuy" v-loading="payLoading">支付</div>
        </div>
      </div>
      <!-- 充值须知 -->
      <payInfo :isMobile="isMobile"></payInfo>
    </div>

    <!-- 支付弹窗 -->
    <popupBar :popshow.sync="wechatPayShow" :isMobile="false">
      <div class="popup wechat">
        <div class="popup-title-wrap">
          {{ this.payType == 0 ? '支付宝支付' : '微信支付' }}
          <i class="el-icon-close close" @click="reloadPage"></i>
        </div>
        <div class="popup-content wechat">
          <p>订单<span class="remain-time">5</span>分钟内有效，请及时付款</p>
          <p class="product-info">
            <span class="label">商品信息：</span>
            <span>{{ selectProduct.shop_name }}</span>
            <span class="label2">数量：</span>
            <span>{{ count }}</span>
          </p>
          <div class="qr-wrap">
            <p class="tip">扫一扫付款</p>
            <p class="total-price">¥ {{ total.toFixed(2) }}</p>
            <vue-qr :text="codeText" :size="200" colorDark="#000" backgroundColor="#fff" :logoSrc="codelogoImg"
              :logoScale="0.2" :margin="0" :callback="getCode"></vue-qr>
            <!-- <canvas ref="qrcodeCanvas" class="qr-code"></canvas> -->
            <div class="qr-error" v-show="orderTimeOut">
              <p>二维码失效</p>
            </div>
            <p class="qr-error-text" v-show="orderTimeOut">请关闭此弹窗，重新进行购买操作</p>
          </div>
        </div>
      </div>
    </popupBar>

    <!-- 支付成功弹窗 -->
    <popupBar :popshow="paySuccess" :isMobile="false">
      <div class="popup success">
        <div class="popup-title-wrap">
          消息
          <i class="el-icon-close close" @click="reloadPage"></i>
        </div>
        <div class="popup-content success">
          <!-- <p>订单<span class="remain-time">5</span>分钟内有效，请及时付款</p> -->

          <i class="el-icon-success"></i>
          <p class="suc-text">付款成功</p>
        </div>
      </div>
    </popupBar>



    <!-- 折扣变化提示 -->
    <popupBar :popshow="payfaildShow" :isMobile="false">
      <div class="popup payfaild">
        <div class="popup-title-wrap">
          支付提示
          <i class="el-icon-close close" @click="reloadPage"></i>
        </div>
        <div class="popup-content payfaild">
          <p>您已经在其他订单中使用折扣优惠，请刷新页面重新下单。</p>
        </div>
        <div class="pop-btn-wrap">
          <button type="button" @click="reloadPage">确认</button>
        </div>
      </div>
    </popupBar>

    <!-- 折扣变化提示 -->
    <popupBar :popshow="inWeChatBrowser" :isMobile="false">
      <div class="popup success">
        <div class="popup-title-wrap">
          提示
          <i class="el-icon-close close" @click="reloadPage"></i>
        </div>
        <div class="popup-content WeChatBrowser">
          <p>1.点击右上角“<i class="el-icon-more"></i>”</p>
          <p>2.再点击在浏览器打开<img src="@/assets/images/inWeChatBrowser.png" alt="" srcset=""></p>
          <p></p>
        </div>
      </div>
    </popupBar>
  </div>
</template>
<script>
// import products from '@/assets/config/products.js'
import payInfo from '@/views/store/components/payInfo.vue'
import popupBar from '@/views/store/components/popupBar.vue'
import { login, aliPayPc, aliPayH5, wechatPayPc, wechatPayH5, createdOrderId, queryOrderId } from '@/service/interfaceApi.js'
import iconWx from '@/assets/images/wxIcon.png'
import iconAli from '@/assets/images/alipay_Icon.png'
// import QRCode from 'qrcodejs2'
import VueQr from 'vue-qr'
export default {
  name: 'gifts',
  props: ['isMobile', 'userInfo', 'products'],
  components: {
    payInfo,
    popupBar,
    VueQr
  },
  data() {
    return {
      count: 1, // 选中的数量
      countLimit: 99, // 最大数量限制 
      selectProduct: {},  // 选中的商品信息
      mpPayShow: false,  // 移动端收银台
      payType: null, // 支付方式 0 zfb 1 wechat
      // totalPrice: 0,  // 原价 总价
      // discountedPrice: 0, // 折扣价
      // total: 0, // 合计价格
      wechatPayShow: false, // 微信支付弹窗
      payLoading: false, // 发起支付的loading
      qrcoded: undefined,
      // alipayIframeSrc: '',
      payfaildShow: false,
      order: '', // 支付时候的orderId
      orderTimeOut: false, // 订单超时状态
      orderTimeOutStr: 0,  // 订单超时时间

      codeText: '', // 二维码内容
      codelogoImg: '', // 二维码logo
      paySuccess: false,
      isWeChatBrowser: window.navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
      inWeChatBrowser:false
    }
  },
  computed: {
    // 原价 总价
    totalPrice() {
      if (!this.selectProduct.shop_id) return '-'
      return (this.selectProduct.shop_price * this.count)
    },
    // 折扣价
    discountedPrice() {
      if (!this.selectProduct.shop_id) return '-'
      return this.selectProduct.shop_price * this.count * ((10 - this.selectProduct.discount) / 10)
    },
    // 合计总价
    total() {
      if (!this.selectProduct.shop_id) return 0
      return this.totalPrice - this.discountedPrice
    }
  },
  methods: {
    minus() {
      if (this.count <= 1) return
      this.count -= 1
    },
    add() {
      if (this.count >= this.countLimit) return
      this.count += 1
    },
    onlyNumbers() {
      this.count = this.count.replace(/[^0-9]/g, '');
      if (this.count > this.countLimit) {
        this.count = this.countLimit
      }
    },
    inputBlur() {
      if (this.count == '') {
        this.count = 1
      }
    },
    payTypeClick(type) {
      if (!this.selectProduct.shop_id) return
      this.payType = type
    },
    productClick(item) {
      if (this.isMobile) {
        if (!this.userInfo.name) {
          this.$emit('openLogin')
        } else {
          this.mpPayShow = true
        }

      }
      this.selectProduct = item
      this.countLimit = item.limit
      this.count = 1

      if (this.payType == null) {
        this.payType = 0
      }

    },
    async toBuy() {
      // 未登录 直接去登录
      if (this.userInfo.name == undefined) {
        return this.$emit('openLogin')
      }

      // 登录选择商品
      if (this.selectProduct.shop_id == undefined) {
        this.$message.error('请选择充值礼包');
        let overflow = document.getElementsByClassName('announce')[0]
        overflow.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        });
        return;
      }
      this.payLoading = true
      const res = await login({ aid: this.userInfo.aid })
      this.payLoading = false
      let data = res.data.data
      if (data.monthFirst != this.userInfo.monthFirst) {
        // this.$message.error('商品价格有变，请重新选择商品。');
        this.payfaildShow = true
        this.selectProduct = {}
        this.$emit('submitLogin', this.userInfo.aid)
        return;
      } else {
        this.createdOrder()
      }
    },
    // 创建订单Id
    async createdOrder() {
      let params = {
        ...this.selectProduct,
        aid: this.userInfo.aid,
        shop_num: this.count,
        total_price: this.total.toFixed(2),
      }
      this.payLoading = true
      const res = await createdOrderId(params)

      if (res.data.code == 200) {
        this.order = res.data.data.orderId
        this.buy()
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 创建支付
    async buy() {
      if(this.isWeChatBrowser){
        this.inWeChatBrowser = true
        this.mpPayShow = false
        return
      }
      let params = {
        ...this.selectProduct,
        aid: this.userInfo.aid,
        shop_num: this.count,
        total_price: this.total.toFixed(2),
        order: this.order
      }
      // 选中支付宝支付
      if (this.payType == 0) {
        let res = undefined
        if (this.isMobile) {
          res = await aliPayH5(params)
          this.payLoading = false
          window.location.href = res.data
        } else {
          res = await aliPayPc(params)
          this.payLoading = false
          let data = res.data
          this.makeQrCode(res.data)
          this.wechatPayShow = true
        }
      } else {

        if (this.isMobile) {
          const res = await wechatPayH5(params)
          this.payLoading = false
          window.location.href = res.data
        } else {
          const res = await wechatPayPc(params)
          this.payLoading = false
          this.makeQrCode(res.data)
          this.wechatPayShow = true
        }
      }

      if (!this.isMobile && this.userInfo.monthFirst) {
        this.loopCheckFirstBuy()
      }
      this.orderTimeOutStr = new Date().getTime() + 300000
      this.loopQueryOrder()
    },
    reloadPage() {
      window.location.reload()
    },
    // 循环检测 是不是每月第一单
    async loopCheckFirstBuy() {
      if (this.orderTimeOut) return
      const res = await login({ aid: this.userInfo.aid })
      if (res.data.data.monthFirst && this.wechatPayShow) {
        setTimeout(() => {
          this.loopCheckFirstBuy()
        }, 5000)
      } else if (!res.data.data.monthFirst && this.wechatPayShow) {
        this.orderTimeOut = true
        this.payfaildShow = true
        this.wechatPayShow = false
      }
    },
    // 循环检查订单状态
    async loopQueryOrder() {
      const res = await queryOrderId({
        order: this.order,
        aid: this.userInfo.aid
      })
      let data = res.data
      if (data.code == 200) {
        this.paySuccess = true
        this.wechatPayShow = false
        setTimeout(() => {
          this.paySuccess = false
        }, 5000)
        return
      }
      let time = new Date().getTime()
      if (time > this.orderTimeOutStr) {
        this.orderTimeOut = true
      } else {
        setTimeout(() => {
          this.loopQueryOrder()
        }, 5000)
      }
    },
    makeQrCode(data) {
      this.codeText = data
      if (this.payType == 0) {
        this.codelogoImg = iconAli
      } else {
        this.codelogoImg = iconWx
      }

    },
    getCode(e) {
      console.log(e);
    }
  }
}
</script>
<style lang="scss">
.gift-wrap {
  margin: 20px 0;
  padding: 10px 15px 40px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  border-radius: 10px;

  .title-wrap {
    width: 100%;
    user-select: none;

    .title {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 25px;
    }
  }

  .gift-list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 350px;

    .gift-item {
      width: calc((100% - 50px)/5);
      min-width: 150px;
      max-height: 358px;
      -webkit-margin-end: 10px;
      margin-inline-end: 10px;
      margin-bottom: 10px;
      background: #fff;
      border: 2px solid #eeeff0;
      border-radius: 25px;
      text-align: center;
      cursor: pointer;
      position: relative;

      &.active {
        border: 2px solid #d32f2f;

        .price-btn {
          background: linear-gradient(115deg, #e22c2c 0%, #d32f2f 100%);
          color: #fff;
        }
      }

      .tag-icons-wrap {
        position: absolute;
        right: 8px;
        top: -3px;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 54px;
        height: 56px;
        background-size: 100% 100%;
        z-index: 10;
        padding-left: 5px;
        user-select: none;
        background: url('~@/assets/images/products/gwpIcon.png') no-repeat center / 100%;

        .pluto-proportion {
          font-size: 18px;
          font-family: Impact;
          color: #fff;
          line-height: 22px;
          display: flex;
          align-items: center;
          margin-top: 11px;

          .percent {
            font-size: 10px;
            font-weight: 600;
            margin-bottom: -4px;
            -webkit-margin-start: 1px;
            margin-inline-start: 1px;
          }
        }
      }

      .gift-icon {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 23px 23px 0 0;

        @for $i from 1 through 14 {
          .item-#{$i} {
            width: 100px * $i;
          }

          &.i#{$i} {
            background-image: url('~@/assets/images/products/' + $i +'.jpg');
          }
        }


      }

      .product-name {
        margin-top: 10px;
        padding: 0 5px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .description-wrap {
        position: relative;
        padding: 0 5px;
        margin-top: 5px;
        height: 55px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 18px;
        color: #999;

        .desc {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }
      }

      .ext-wrap {
        padding: 0 5px;
        margin-top: 7px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        height: 20px;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .price-btn {
        margin: 5px;
        height: 40px;
        background: linear-gradient(180deg, #eeeff0 0%, #f4f4f5 100%);
        border-radius: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #d32f2f;
        line-height: 25px;
        cursor: pointer;
        user-select: none;

        .mr5 {
          margin-right: 5px;
        }
      }
    }
  }

  .payment-wrap {
    margin-top: 40px;

    .pay-amount {
      .titile {
        margin-bottom: 10px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 25px;
      }

      .stepper-wrap {
        display: inline-block;
        position: relative;

        .stepper {
          background: #f2f2f2;
          border-radius: 20px;
          padding: 5px;
          height: 40px;
          min-width: 167px;
          max-width: 200px;
          display: flex;

          .hx-button {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 7px 12px;
            margin: 0;
            font-size: 17px;
            line-height: 1.4;
            text-align: center;
            cursor: pointer;
            transition: opacity ease .15s;
            user-select: none;
            color: #d32f2f;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            border: 2px solid #edebeb;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;

            &:focus,
            &:active {
              outline: none;
            }

            &.btn-disabled {
              border-radius: 50%;
              color: #ccc;
              cursor: not-allowed;
            }

            >span {
              display: flex;
              align-items: center;
            }

            &::before {
              position: absolute;
              top: 0;
              left: 0;
              transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
              width: 100%;
              height: 100%;
              border: 1px var(--border-style) solid #000;
              opacity: 0;
              content: " ";
              box-sizing: content-box;
              border-radius: 50%;
              background-color: #aaa;
              outline: none;
            }
          }

          .step-content {
            display: flex;
            align-items: center;
            flex: 1 1;
            padding: 0 3px;

            .input {
              width: 55px;
              height: 28px;
              background: #fff;
              text-align: center;
              border-radius: 10px;
              border: 2px solid #d32f2f;
              color: #d32f2f;
              font-family: PingFangSC-Medium, PingFang SC;
              outline: 0;

              &:focus {
                border: 2px solid #d32f2f;
              }
            }

            .max-limit {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #999;
              line-height: 20px;
              margin-left: 5px;
            }
          }
        }
      }
    }

    .coupon-wrap {
      margin: 40px 0;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }

      .content {
        font-size: 13px;
        margin-left: -5px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    .pay-type-wrap {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 25px;
        margin-bottom: 10px;
      }
    }

    .pay-type-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .pt-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-margin-end: 20px;
        margin-inline-end: 20px;
        margin-bottom: 10px;
        min-width: 312px;
        width: calc(33.33% - 20px);
        height: 50px;
        background: #fff;
        border-radius: 25px;
        border: 2px solid #eeeff0;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        background: #eeeff0;
        border: 2px solid #eeeff0;

        &.disabled {
          filter: grayscale(100%);
          cursor: not-allowed;
        }

        &.active {
          filter: none;
          border: 2px solid #d32f2f;
          background: #fff8f8;
        }

        .icon {
          height: 30px;
          object-fit: contain;
          border-style: none;
        }

        .recommend {
          background: #ea6b30;
          font-size: 12px;
          color: #fff;
          font-family: PingFangSC-Regular, Microsoft Yahei;
          border-radius: 10px 10px 0;
          line-height: 18px;
          text-align: center;
          padding: 0 6px;
          position: absolute;
          top: -9px;
          right: 3px;
        }
      }
    }

    .pay-content-wrap {
      display: flex;
      align-items: stretch;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      margin-top: 20px;
      font-size: 14px;
      color: #333;

      .detail {
        flex: 2 1;
        background-color: #f4f4f4;
        border-radius: 10px;
        padding: 20px 10px;
        width: 100%;
        line-height: 20px;
        -webkit-margin-end: 10px;
        margin-inline-end: 10px;

        .item {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #999;
            min-width: 70px;
            -webkit-margin-end: 10px;
            margin-inline-end: 10px;
          }

          .gary {
            color: #999;
          }
        }
      }

      .total {
        flex: 1 1;
        background-color: #f4f4f4;
        border-radius: 10px;
        padding: 20px 10px;
        width: 100%;
        line-height: 20px;

        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #999;
            min-width: 70px;
            -webkit-margin-end: 10px;
            margin-inline-end: 10px;
          }

          .discount-amount {
            color: #d32f2f;
          }

          .line {
            margin: 0 5px;
          }

          .gary {
            color: #999;
          }
        }
      }
    }

    .total-info {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      -webkit-margin-end: 10px;
      margin-inline-end: 10px;
      font-size: 18px;
      color: #333;
      text-align: end;
      line-height: 25px;

      .amount {
        -webkit-margin-start: 10px;
        margin-inline-start: 10px;
        color: #d32f2f;

        .currency {
          font-size: 14px;
          -webkit-margin-end: 5px;
          margin-inline-end: 5px;
          font-family: PingFangSC-Medium, PingFang SC;
        }
      }
    }

    .pay-btn-wrap {
      display: flex;
      margin-top: 20px;
      justify-content: flex-end;
      align-items: center;

      .button {
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 25px;
        user-select: none;
        cursor: pointer;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        font-weight: 500;
        padding: 0 10px;
        text-align: center;
        opacity: .9999;
        width: 220px;
        display: flex;
        background: linear-gradient(180deg, #eeeff0 0%, #f4f4f5 100%);
        color: #333;

        &.active {
          background: linear-gradient(115deg, #e22c2c 0%, #d32f2f 100%);
          color: #fff;
        }
      }
    }
  }
}

.popup.wechat {
  width: 600px;

  .popup-content.wechat {
    padding: 20px 15px 20px;
    background: #f4f4f4;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 20px;
    border-radius: 10px;

    >p {
      text-align: left;
    }

    .remain-time {
      color: #f60;
      margin: 0 5px;
    }

    .product-info {
      font-size: 16px;
      margin-top: 10px;

      .label {
        color: #333;
      }

      .label2 {
        color: #333;
        margin-left: 40px;
      }
    }

    .qr-wrap {
      position: relative;
      margin-top: 20px;
      background: #fff;
      border-radius: 20px;
      padding: 20px 10px 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .tip {
        font-size: 16px;
        color: #666;
        text-align: center;
      }

      .total-price {
        font-size: 40px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: 700;
        color: #f60;
        line-height: 48px;
        margin-bottom: 10px;
      }

      .ali-pay-code {
        width: 220px;
        height: 220px;
        margin: 0 auto;

        >iframe {
          width: 100%;
          height: 100%;
        }
      }

      .qr-code {
        position: relative;
        width: 220px;
        height: 220px;
        background-color: #ccc;
      }

      .qr-error {
        position: absolute;
        top: 88px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 220px;
        height: 220px;
        background-color: rgba(0, 0, 0, .6);
        color: #fff;
        font-size: 18px;
        text-align: center;
        padding-top: 100px;
        line-height: 20px;
        backdrop-filter: blur(3.5px);
      }

      .qr-error-text {
        font-size: 18px;
        line-height: 20px;
        margin-top: 16px;
      }
    }
  }
}

.popup.payfaild {
  width: 450px;

  .popup-content.payfaild {
    padding: 20px;
    background: #f6f6f6;

    >p {
      font-size: 14px;
      background-color: #fff;
      padding: 20px 40px;
      border-radius: 20px;
    }
  }

  .pop-btn-wrap {
    padding: 20px;

    >button {
      width: 100%;
      height: 50px;
      background: #d32f2f;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #fff;
      border: 0;
      border-radius: 25px;
      cursor: pointer;
    }
  }
}

.popup.success {
  width: 450px;

  .popup-content.success {
    height: 350px;
    padding-top: 60px;

    >i {
      font-size: 48px;
      color: #67C23A;
      margin-bottom: 20px;

    }

    >p {
      color: #000;
      font-size: 20px;
      font-weight: 500;
    }
  }
  .popup-content.WeChatBrowser {
    padding: 40px 40px;
    text-align: left;
    >p {
      color: #000;
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      img{
        display: inline-block;
        width: 60px;
        height: auto;
      }
    }
  }
}



.mobile-body {
  .gift-wrap {
    padding: 10px;
    border-radius: 0;

    .gift-list {
      .gift-item {
        width: calc((100% - 10px)/2);
        margin-bottom: 12px;
        min-height: 264px;

        &:nth-child(2n) {
          -webkit-margin-end: 0;
          margin-inline-end: 0;
        }
      }
    }
  }

  .payment-wrap {
    margin-top: 0;

    .pay-amount {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .titile {
        margin-bottom: 0;
      }
    }

    .pay-type-wrap {
      .title {
        text-align: left;
      }

      .pay-type-list {
        .pt-btn {
          margin-bottom: 10px;
          width: 100%;
          -webkit-margin-end: 0;
          margin-inline-end: 0;
        }
      }
    }

    .pay-btn-wrap {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 70px;
      background-color: #fff;
      box-shadow: 0 -2px 4px rgba(0, 0, 0, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;

      .button {
        width: 100%;
      }
    }
  }

  .popup {
    width: 100%;
    border-radius: 0;

    .popup-title-wrap {
      border-radius: 0;
    }

    .popup-content {
      &.pay {
        background-color: #fff;
        padding: 20px 15px 90px;
        max-height: calc(80vh - 45px);
        overflow: auto;
      }

    }
  }

  .popup.success {
    width: 100vw;
  }
}


@media screen and (max-width: 500px) {
  .mobile-body .payment-wrap .pay-content-wrap {
    flex-direction: column;
    align-items: flex-start;

    .detail {
      margin-inline-end: 0;
      margin-bottom: 10px;

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
      }
    }
  }
}

@media screen and (min-width: 500px) and (max-width: 900px) {
  .mobile-body .gift-wrap .gift-list .gift-item {
    width: calc((100% - 20px) / 3)
  }

  .mobile-body .gift-wrap .gift-list .gift-item:nth-child(2n) {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px
  }

  .mobile-body .gift-wrap .gift-list .gift-item:nth-child(3n) {
    -webkit-margin-end: 0;
    margin-inline-end: 0
  }
}

@media screen and (min-width: 900px) {
  .mobile-body .gift-wrap .gift-list .gift-item {
    max-width: 300px;
    width: calc((100% - 30px)/4)
  }

  .mobile-body .gift-wrap .gift-list .gift-item:nth-child(2n),
  .mobile-body .gift-wrap .gift-list .gift-item:nth-child(3n) {
    -webkit-margin-end: 10px;
    margin-inline-end: 10px
  }

  .mobile-body .gift-wrap .gift-list .gift-item:nth-child(4n) {
    -webkit-margin-end: 0;
    margin-inline-end: 0
  }
}
</style>